<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="终端管理" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="display: flex;background: white;">
      <div style="flex:1;">
        <nut-searchbar
            @search="onSearch"
            @clear="onSearch"
            v-model="searchModel.keyWord"
            placeholder="请输入搜索关键词"
        >
          <template #rightout>
            <div style="display:flex;">
              <div @click="onSearch">搜索</div>
              <div @click="add" style="margin-left:20px;">新增 </div>
            </div>
          </template>
        </nut-searchbar>
      </div>
    </div>
    <div style="display:flex;padding:0 5px;background-color: #fff;">
      <div style="flex:1;">
        <nut-checkbox v-model="searchModel.isMy" @change="change">只显示我相关的</nut-checkbox>
      </div>
      <div>
        <nut-checkbox v-model="searchModel.sortByNear" @change="change">按距离排序</nut-checkbox>
      </div>
    </div>
    <div style="display: flex;padding-left: 2px;">
      <div style="height:calc(100vh - 158px);  ">
        <div  style="width: 80px;background-color:#fff;height:calc(100vh - 133px);overflow: auto; ">
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===null?'active':'']"
              @click="choseCat(null)">
            <div class="line">
              全部
            </div>
          </div>
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===item.id?'active':'']"
              v-for="(item,index) in state.catList" :key="index" @click="choseCat(item.id)"
          >
            <div class="line">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
      <div style="height:calc(100vh - 158px); overflow: auto; ">
        <fresh-load @action="action" url="app/getContactList" :search-model="searchModel" ref="freshRef">
          <div class="item" v-for="(item,index) in state.list" :key="index" >
            <div class="name" style="display:flex;" @click="editGood(item)">
              <div style="flex:1;">{{ item.name }}</div>
              <div>

              </div>
            </div>
            <div style="display:flex;margin-top:10px;" >
              <div @click="editGood(item)">
                <nut-image width="80px" height="80px"></nut-image>
              </div>
              <div style="margin-left:10px;">
                <div @click="editGood(item)">联系人：{{item.linkName}}</div>
                <div @click="editGood(item)">手机：{{item.linkMobile}} 电话：{{item.linkPhone}}</div>
                <div @click="editGood(item)">地址：{{item.address}}</div>
                <div>
                  <nut-space>
                    <div>距离：{{item.distance}}</div>
                    <div >
                      <nut-tag >{{item.locate}}</nut-tag>
                    </div>
                    <div v-if="item.locate==='未定位'">
                      <nut-tag type="success">去定位</nut-tag>
                    </div>
                  </nut-space>
                </div>
              </div>
            </div>
          </div>
        </fresh-load>
      </div>
    </div>
  </div>
</template>
<script setup>
// 商品管理
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import {computed, onActivated, onMounted, reactive, ref} from "vue";
import FreshLoad from "@/components/freshLoad.vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const router = useRouter()
const state = reactive({
  list: [],
  catList: [],
  title: '',
})
const freshRef = ref(null)
const searchModel = ref({
  active: 0,
  keyWord: '',
  isMy:null,
  sortByNear: null,
  goodCatId: null,
  salesId: '',
  lat: '',
  lon: ''
})
onMounted(() => {
  let usr = tool.data.getUser()
  searchModel.salesId = usr.id
})
onActivated(() => {
  getGoodCat()
})
const height = computed(() => {
  return window.innerHeight - 131
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const clickLeft = () => {
  router.go(-1)
}
const change = () => {
  getList()
}
const saved = () => {
  searchModel.keyWord = ''
  getList()
}
const add = () => {
  router.push({name: 'addcontact'})
}
const editGood = (item) => {
  router.push({name: 'addcontact', query: {good: JSON.stringify(item)}})
}
const onSearch = () => {
  state.list = []
  getList()
}
const action = (arr) => {
   state.list = arr
}
const choseCat = (id) => {
  searchModel.value.goodCatId = id
  getList()
}
const getGoodCat = () => {
  tool.post('app/getContactCat').then(ret => {
    if (ret.stat) {
      state.catList = ret.data
      ret.data.map(row => {
        row.value = row.id
        row.label = row.name
      })
      global.contactCatList = ret.data
    }
  })
}

const getList = () => {
  freshRef.value.getList()
}
const addCart = (goods) => {

}


</script>
<style scoped lang="scss">
.active {
  background-color: rgba(0, 0, 0, 0.05);

  .line {
    border-left: 3px solid red;
  }
}

.item {
  margin: 7px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;

  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }

  .link {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
    display: flex;
  }

  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }

  &:active {
    background-color: rgba(0, 0, 0, 0.03);
  }
}


</style>